
.radius(){
    border-radius: 15px;
}
.main{
    width: 100%;
    // background: #78c6eb;
// 超出后显示滚动条
overflow-y: scroll;

    .swiper{
        width: 100%;
        height: 200px;
        background: rebeccapurple;
        .sp1{
            background: url('../imgs/index-swiper-bg1.jpg') no-repeat;
            background-size: 100%;
        }
        .sp2{
            background: url('../imgs/index-swiper-bg2.jpg') no-repeat;
            background-size: 100%;

        }
        .sp3{
            background: url('../imgs/index-swiper-bg3.jpg') no-repeat;
            background-size: 100%;

        }
    }
    .container{
        width: 85%;
        height: 600px;
        // background: red;
        margin: 20px auto;

    }
    .item1{
        width: 100%;
        height: 150px;
        // background: green;
        .rank{
        height: 150px;
        flex: 1.5;
        background: #1592CC url('../imgs/index-card-rank.png') no-repeat;
        background-size: 85%;
        .radius();
        position: relative;

        .rankNum{
            height: 112px;
            font-size: 30px;
            color: #fff;
            font-weight: 600;
            position: absolute;
            right: 20px;
            bottom: 0;
        }
        }
        .clock{
            flex: 2.12;
            height: 150px;
            background: #78c6eb url('../imgs/index-card-sum.png') no-repeat;
            margin-left: 20px;
    background-size: 100%;
            .radius();
            position: relative;
        }
        .btn2{
            width: 96px;
            height: 36px;
            border: 2px solid #005177;
            border-radius: 20px;
            text-align: center;
            line-height: 30px;
            position: absolute;
            right: 15px;
            bottom:25px;

            
        }

    }
    .item2{
            margin-top: 20px;

        .motion{
            flex: 1.8;
            height: 110px;
            background: lightcoral url('../imgs/index-card-data.png') no-repeat;
            background-size: 100%;
            .radius();
        }
        .badge{
            flex: 1.85;
            height: 110px;
            background: #78c6eb url('../imgs/index-card-badge.png') no-repeat;
            .radius();
            margin-left: 20px;
            position: relative;
            .badgenum{
            
            position: absolute;
            right: 12px;
            bottom: 2px;
            span{
            font-size: 80px;
            color: #004E73;
            font-weight: 600;
            }
            }
        }
    }
    .item3{
        margin-top: 20px;
        width: 100%;
        height: 110px;
        background: url('../imgs/index-swiper-bg2.jpg') no-repeat;
        .radius();
        background-size: 100%;

        
    }
    .item4{
        margin-top: 20px;
        width: 100%;
        height: 110px;
        background: url('../imgs/index-card-run.png') no-repeat;
        background-size: 100%;
        border-radius: 15px;
        .radius()
    }
    .text{
        // font-size: 20px;
        color: #005177;
        font-weight: 600;
        margin-left: 15px;
        padding-top: 13px;
    }
    .text1{
        font-size: 16px;
        color: #fff;
        margin-left: 15px;
        padding-top: 13px;
        }

}
// footer{
//     width: 100%;
//     height: 77px;
//     background: pink;
// }